<template>
  <div style="background: #f4f5f5">
    <main class="container">
      <div class="view setting-profile-view">
        <h2>账号设置</h2>
        <ul class="setting-list">
          <li class="item">
            <span class="title">手机</span>
            <input v-model="accountset[0].phone"
                spellcheck="false"
                class="input"
              />
               <div class="action-box">
                <button tabindex="-1" class="btn edit-btn">
                  <img />
                  <span>修改</span>
                </button>
              </div>
          </li>
          <li class="item">
            <span class="title">微信</span>
            <div class="input-box profile-input profile-input">
              <input
                v-model="weixin" 
                spellcheck="false"
                class="input"
              />
              <div class="action-box">
                <button tabindex="-1" class="btn edit-btn">
                  <img />
                  <span>修改</span>
                </button>
              </div>
            </div>
          </li>
          <li class="item">
            <span class="title">新浪微博</span>
            <div class="input-box profile-input profile-input">
              <input
                v-model="weibo"
                spellcheck="false"
                class="input"
              />
              <div  class="action-box">
                <button tabindex="-1" class="btn edit-btn">
                  <img />
                  <span>修改</span>
                </button>
              </div>
            </div>
          </li>
          <li class="item">
            <span class="title">GitHub</span>
            <div class="input-box profile-input profile-input">
              <input
                v-model="github"
                spellcheck="false"
                class="input"
              />
              <div class="action-box">
                <button tabindex="-1" class="btn edit-btn">
                  <img />
                  <span>修改</span>
                </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "",
  component() {},
  data() {
    return {
      msg: "asdasd",
      imageUrl: '',
      accountset: [
          {phone:"19140241369"}
      ],
     
    };
  },
  components: {},
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
};
</script>
<style scoped>
* {
  list-style: none;
  text-decoration: none;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.container {
  position: relative;
 margin-left: 350px;
  width: 100%;
  max-width: 760px;
  background-color: #fff;
}
.setting-profile-view {
  position: relative;
  padding: 2.0rem 4rem 7rem;
  border-radius: 2px;
}

.setting-list .item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid #f1f1f1;
}

.setting-list {
  padding: 0.3rem 0;
}
.setting-list .title {
  font-size: 0.9rem;
  color: #333;
  width: 8rem;
}
.avatar-uploader {
  display: flex;
}
.setting-list .item .action-box {
  margin-left: 1rem;
}
.setting-list .item {
  display: flex;
  align-items: center;
  padding: 1.2rem 0;
  border-top: 1px solid #f1f1f1;
}
.profile-input {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
.input {
  flex: 1;
  display: inline-block;
  border: none;
  outline: none;
  color: #909090;
  font-size: 1.3rem;
}
.button,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #007fff;
  color: #fff;
  border-radius: 2px;
  border: none;
  padding: 0.5rem 1.3rem;
  outline: none;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}
::-webkit-input-placeholder {
  color: #999;
  font-size: 15px;
}
</style>